<template>
	<view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="close"
			@close="close" :closeOnClickOverlay="true" :defaultIndex="defaultIndex" keyName="value"
			:confirmColor='confirmColor'></u-picker>

		<!--
		使用
		<region @chechCity="chechCity" @close="close" :show="showCity" confirmColor='#09C567'></region>
		import region from '@/components/city/region.vue';
		showCity: false, //选择地址弹窗
		components: {
			region
		},
		-->

	</view>
</template>

<script>
	// 地区数据源，id:邮政编码,value:地区名称
	import region from './region.js';
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			confirmColor: {
				type: String,
				default: '#3c9cff'
			}
		},
		data() {
			return {
				// 地区选择是否显示

				// 选择器列表显示数据
				columns: [],
				// 选择吕默认选中项
				defaultIndex: [],
				// 已选择的地区
				selectedRegion: []
			};
		},
		computed: {
			regionStr() {
				if (this.selectedRegion.length < 1) return '选择地区';
				// 返回当前选中数据
				// 筛选出 value 值并使用 - 分割
				return this.selectedRegion
					.map(item => {
						return item.value;
					})
					.join(' - ');
			}
		},
		onReady() {
			// 将初始化的过程放在onReady中是在页面打开的过程中减少渲染提高页面打开动画的流畅性，因为picker不是一个需要默认展示的组件
			let mockData = [{
				id: '510000',
				value: '四川'
			}, {
				id: '510100',
				value: '成都市'
			}, {
				id: '510104',
				value: '锦江区'
			}];
			// 获取当前数据的默认选中
			let index = this.getRegionIndex(mockData);
			this.init(index);
		},
		methods: {
			// 初始化
			// selectedArr 默认选中的项，默认第一项
			init(selectedArr = [0, 0, 0]) {
				let {
					province,
					city,
					county
				} = this.getColumns(selectedArr);
				this.columns = [province, city, county];

				// 设置默认选中
				this.defaultIndex = selectedArr;
			},
			// 获取选项
			getColumns(selectedArr) {
				// 省份
				let province = region.map((item, index) => {
					return {
						id: item.id,
						value: item.value
					};
				});

				// 市级
				let city = region[selectedArr[0]].childs.map((item, index) => {
					return {
						id: item.id,
						value: item.value
					};
				});

				// 区县
				let county = region[selectedArr[0]].childs[selectedArr[1]].childs.map((item, index) => {
					return {
						id: item.id,
						value: item.value
					};
				});

				return {
					province,
					city,
					county
				};
			},
			// 监听滚动
			changeHandler(e) {
				let {
					city,
					county
				} = this.getColumns(e.indexs);

				// 市级滚动
				if (e.columnIndex === 1) {
					// 重置区县列表
					this.$set(this.columns, 2, county);
					// 区县级默认选中为0
					this.defaultIndex = [e.indexs[0], e.indexs[1], 0];
				}

				if (e.columnIndex === 0) {
					// 重置市级列表
					this.$set(this.columns, 1, city);
					// 重置区县列表
					this.$set(this.columns, 2, county);
					// 市级和区县级默认选中为0
					this.defaultIndex = [e.indexs[0], 0, 0];
				}
			},
			// 确认
			confirm(e) {
				// 关闭选择
				// 设置默认选中
				this.defaultIndex = e.indexs;
				// 赋值当前选中地区数据
				this.selectedRegion = e.value;
				let codeArr = [];
				let cityArr = [];
				this.selectedRegion.map(item => {
					codeArr.push(item.id);
					cityArr.push(item.value);
				});
				let obj = {
					code: codeArr.join(' '),
					city: cityArr.join(''),
					citya: cityArr
				};

				this.$emit('chechCity', obj);
				this.$emit('update:show', false)
				//console.log(this.selectedRegion);
			},
			// 关闭
			close() {
				this.$emit('close')
				this.$emit('update:show', false)
			},
			// 获取地区默认选中位置
			getRegionIndex(data) {
				let [province, city, county] = [0, 0, 0];
				province = region.findIndex((item, index) => {
					return data[0].id == item.id;
				});
				city = region[province].childs.findIndex((item, index) => {
					return data[1].id == item.id;
				});
				county = region[province].childs[city].childs.findIndex((item, index) => {
					return data[2].id == item.id;
				});
				return [province >= 0 ? province : 0, city >= 0 ? city : 0, county >= 0 ? county : 0];
			}
		}
	};
</script>

<style lang="scss"></style>
